<template>
  <div>
    <el-dialog v-model="editReplyConfig.visible" :title="editReplyConfig.title" width="800" v-if="editReplyConfig.visible" :close-on-press-escape="false">
      <div>
        <div class="tip">最多设置3条回复内容，AI客服按顺序全部发送，多条信息间将智能拟人延迟，总发送时长不超过1分钟。</div>
        <div class="formItemClass">
          <span class="label">问题分类:</span>
          <div>
            <p class="label">{{ editReplyConfig.categoryName }}</p>
            <p style="color: #969696">{{ editReplyConfig.categorySubtitle }}</p>
          </div>
        </div>
        <div class="formItemClass">
          <span class="label">回复内容:</span>
          <div>
            <InputBox ref="inputBoxRef" v-for="(item, index) in contentValList" :key="index" :contentItem="item" :rows="3" style="margin-top: 10px; height: 150px"></InputBox>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button @click="saveReply" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue"
import InputBox from "@/components/inputBox/index"
import {add_auto_reply_content, update_auto_reply_content} from "@/api/settingtApi"
import {ElMessage} from "element-plus";
const editReplyConfig = reactive({
  visible: false,
  title: "编辑智能回复",
  categoryName: "",
  categorySubtitle: "",
  categoryId: ""
})
const contentValList = ref([])
const replyItemId = ref("")
const categoryId = ref("")
const openType = ref()
const openDialog = (type, item = {}, categoryItem = {}) => {
  openType.value = type
  editReplyConfig.categorySubtitle = categoryItem.memo
  editReplyConfig.categoryName = categoryItem.strategyName
  editReplyConfig.categoryId = categoryItem.id
  replyItemId.value = item.id
  if(type === "add") {
    editReplyConfig.title = "添加回复"
    contentValList.value = [
      {
        content:"",
        type: 1
      },
      {
        content:"",
        type: 1
      },
      {
        content:"",
        type: 1
      }
    ]
  }else if(type === "edit") {
    editReplyConfig.title = "编辑智能回复"
    contentValList.value = item.msgContent || []
    while (contentValList.value.length < 3){
      contentValList.value.push({
        content:"",
        type: 1
      })
    }
    console.log(contentValList.value, "contentValList.value")
  }
  editReplyConfig.visible = true
}

const emits = defineEmits(['changeReply'])
const inputBoxRef = ref()
const saveReply = async () => {
  let params = {
    msgContent: contentValList.value
  }
  contentValList.value.forEach((el, index) => {
    let inputConfig = inputBoxRef.value[index].inputConfig
    el.type = inputConfig.inputType
    switch (inputConfig.inputType){
      case 1: el.content = inputConfig.inputVal; break
      case 2: el.content = inputConfig.imageVal; break
    }
  })
  params.msgContent = contentValList.value.filter(el => el.content)
  let res = {}
  if(openType.value === "add") {
    params.strategyId = editReplyConfig.categoryId
    res = await add_auto_reply_content(params)
  }else if(openType.value === "edit"){
    params.id = replyItemId.value
    res = await update_auto_reply_content(params)
  }
  console.log(params, "params")
  if(res.code === 100000) {
    ElMessage.success(res.msg)
    emits("changeReply")
    close()
  }
}
const close = () => {
  editReplyConfig.visible = false
}
defineExpose({openDialog})
</script>

<style lang="scss" scoped>
.formItemClass {
  display: flex;
  margin-top: 20px;
  font-size: 13px;
  .label {
    margin-right: 10px;
  }
  p{
    margin: 0;
    margin-bottom: 5px;
  }
}
::v-deep(.el-dialog__title) {
  font-size: 16px;
}
.tip {
  border: 1px solid #bde5ff;
  background: #e6f7ff;
  padding: 10px;
}
.privateLetter {
  width: 700px;
  border: 1px solid $borderColor;
}

</style>